<template >
  <div @mouseenter="showbtn" @mouseleave="showbtn">
    <v-app id="inspire">
      <!-- 顶部导航 -->
      <transition name="top" appear key="0">
        <div>
          <v-app-bar
            app
            color="white"
            flat
            style="opacity: 0.8"
            v-if="$store.state.topshow"
          >
            <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
            <v-container class="py-0 fill-height">
              <div
                style="
                  display: flex;
                  flex-wrap: nowrap;
                  justify-content: center;
                  align-items: center;
                "
              >
                <v-avatar class="mr-10" color="teal" rounded size="40" tile>
                  <!-- 顶部导航头像 -->
                  <img :src="logosrc" @click="getIndex" />
                </v-avatar>
                <!-- 导航 -->
                <v-btn
                  v-for="link in TopLinks"
                  :key="link.name"
                  text
                  :to="link.url"
                >
                  {{ link.name }}
                </v-btn>
                <v-spacer></v-spacer>
                <v-spacer></v-spacer>

                <!-- 搜索 -->
                <!-- <v-responsive max-width="260">
                <v-text-field
                  dense
                  flat
                  hide-details
                  rounded
                  solo-inverted
                ></v-text-field>
              </v-responsive> -->
                <!-- 登陆按钮 -->
                <!-- <div
                  style="margin-left: 40px"
                  v-if="!$store.state.user_islogin"
                > -->
                <v-btn
                  text
                  @click="getlogin"
                  v-if="!$store.state.user_islogin"
                  >{{ status }}</v-btn
                >
                <!-- </div> -->
                <div style="margin-left: 40px" v-if="$store.state.user_islogin">
                  <span
                    class="el-dropdown-link"
                    @mouseenter="usershow = !usershow"
                    v-if="!usershow"
                  >
                    {{ get_username }}
                  </span>

                  <!-- divided是在选项下加横线 -->
                  <div v-if="usershow" @mouseleave="usershow = !usershow">
                    <!-- <button style="padding-right: 10px">个人中心</button> -->
                    <button @click="get_logout">退出</button>
                  </div>
                </div>
              </div>
              <v-form>
                <v-row justify="center">
                  <v-dialog v-model="ToDialog" persistent max-width="500px">
                    <v-card>
                      <v-card-title>
                        <span class="text-h5">欢迎登陆</span>
                      </v-card-title>
                      <v-card-text>
                        <v-container>
                          <v-row>
                            <v-col cols="12">
                              <v-text-field
                                label="账号"
                                required
                                v-model="forms.username"
                              ></v-text-field>
                            </v-col>
                            <v-col cols="12">
                              <v-text-field
                                label="密码"
                                type="password"
                                required
                                v-model="forms.password"
                              ></v-text-field>
                            </v-col>
                          </v-row>
                        </v-container>
                        <small></small>
                      </v-card-text>
                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="blue darken-1" text @click="login"
                          >登陆</v-btn
                        >
                        <v-btn color="blue darken-1" text @click="register"
                          >注册</v-btn
                        >
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                </v-row>
                <div class="text-center ma-2">
                  <v-snackbar v-model="forms.snackbar">
                    {{ forms.text }}
                    <template v-slot:action="{ attrs }">
                      <v-btn
                        color="pink"
                        text
                        v-bind="attrs"
                        @click="forms.snackbar = false"
                      >
                        关闭
                      </v-btn>
                    </template>
                  </v-snackbar>
                </div>
              </v-form>
            </v-container>
          </v-app-bar>
        </div>
      </transition>

      <!-- 侧边导航 -->
      <transition name="top" appear key="0">
        <div @mouseleave="asidebtn">
          <v-navigation-drawer
            app
            v-model="drawer"
            fixed
            temporary
            v-if="drawer"
          >
            <v-sheet color="grey lighten-4" class="pa-4">
              <v-avatar class="mr-10" color="warning lighten-2" size="112">
                <!-- 侧边导航头像 -->
                <img src="../../assets/logo.png" />
              </v-avatar>
            </v-sheet>
            <v-divider></v-divider>

            <v-list>
              <v-list-item
                @mousedown="$store.commit('change')"
                v-for="link in SideLinks"
                :key="link.name"
                link
                :to="link.url"
              >
                <v-list-item-icon>
                  <v-icon>{{ link.icon }}</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>{{ link.name }}</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list>
          </v-navigation-drawer>
        </div>
      </transition>

      <v-main class="grey lighten-3">
        <router-view :style="bg"></router-view>
        <!-- 轮播图 -->
        <div v-if="this.$route.name == 'Index'" style="height: 100%">
          <div style="height: 100%">
            <el-carousel
              autoplay
              indicator-position
              style="height: 100%"
              height="100%"
            >
              <el-carousel-item
                v-for="(item, i) in items"
                style="height: 100%"
                :key="i"
              >
                <el-image
                  style="width: 100%; height: 100%"
                  :src="item"
                  fit="fill"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </v-main>
      <!-- 登陆提示 -->

      <v-snackbar v-model="snackbar">
        {{ text }}
        <template v-slot:action="{ attrs }">
          <v-btn color="pink" text v-bind="attrs" @click="snackbar = false">
            关闭
          </v-btn>
        </template>
      </v-snackbar>

      <!-- 底部导航 -->
      <transition name="bottom" appear key="1">
        <div>
          <v-footer dark padless v-if="$store.state.bottomshow">
            <v-card class="flex" flat tile>
              <v-card-title class="teal" v-if="this.$route.name == 'Index'">
                <strong class="subheading">Welcome to the Bsea Blog!</strong>
                <v-spacer></v-spacer>
                <v-btn
                  v-for="link in FooterIcons"
                  :key="link.name"
                  class="mx-4"
                  dark
                  icon
                >
                  <div
                    class="text-center d-flex align-center justify-space-around"
                  >
                    <v-tooltip bottom>
                      <template v-slot:activator="{ on, attrs }">
                        <v-icon
                          color="white"
                          dark
                          v-bind="attrs"
                          v-on="on"
                          size="30"
                        >
                          {{ link.name }}
                        </v-icon>
                      </template>
                      <span>{{ link.content }}</span>
                    </v-tooltip>
                  </div>
                </v-btn>
              </v-card-title>

              <v-card-text
                class="py-2 white--text text-center"
                v-if="this.$route.name == 'Index'"
              >
                {{ current }}
                <strong> Bsea</strong>
              </v-card-text>
            </v-card>
            <el-backtop></el-backtop>
          </v-footer>
        </div>
      </transition>
    </v-app>
  </div>
</template>

<script>
import { request } from "../network/request";
export default {
  name: "Index",
  data: () => ({
    forms: {
      username: "",
      password: "",
    },
    usershow: true,
    aside: false,
    imgHeight: "",
    text: "",
    snackbar: false,
    ToDialog: false,
    show: false,
    loginbth: true,
    get_username: "",
    status: "登陆",
    // 背景图
    bg: {
      // backgroundImage: "url(" + require("../../assets/bgc.jpg") + ")",
      backgroundRepeat: "no-repeat",
      backgroundSize: "cover",
      backgroundPosition: "center center",
      width: "100%",
      height: "100%",
      backgroundAttachment: "fixed",
    },
    logosrc: "",
    i: 0,
    lastsrc: "",
    // 顶部导航选项
    TopLinks: [
      { name: "首页", url: "/blog/index/TopNavigation/BlogIndex" },
      { name: "随拍", url: "/blog/index/TopNavigation/BlogCasualPhoto" },
      { name: "随记", url: "/blog/index/TopNavigation/BlogCasualRecord" },
      { name: "笔记", url: "/blog/index/TopNavigation/BlogNote" },
    ],
    // 侧边导航选项
    SideLinks: [
      {
        name: "首页",
        url: "/blog/index/TopNavigation/BlogIndex",
        icon: "mdi-account-arrow-right-outline",
      },
      {
        name: "随拍",
        url: "/blog/index/TopNavigation/BlogCasualPhoto",
        icon: "mdi-google-chrome",
      },
      {
        name: "随记",
        url: "/blog/index/TopNavigation/BlogCasualRecord",
        icon: "mdi-select-color",
      },
      {
        name: "笔记",
        url: "/blog/index/TopNavigation/BlogNote",
        icon: "mdi-wallet-outline",
      },
    ],
    // 底部导航图标
    FooterIcons: [
      { name: "mdi-qqchat", content: "3012793548" },
      { name: "mdi-wechat", content: "Bsea888" },
    ],
    drawer: null,
    imgs: [],
    // 轮播图
    items: [],
  }),
  created() {
    this.lastsrc = "logo.png";
    this.logosrc = require("../../assets/" + this.lastsrc);
    // console.log(this.$route.path);
    request({
      url: "/admin/getimgpage",
      method: "GET",
    })
      .then((res) => {
        this.imgs.push(eval(res.data.msg));
        var i = 0;
        for (; i < this.imgs[0].length; i++) {
          this.items.push(this.imgs[0][i].imgUrl);
          this.imgLoad();
        }
        // console.log(this.items);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  updated() {},
  methods: {
    asidebtn() {
      this.drawer = !this.drawer;
    },
    showbtn() {
      this.$store.commit("change");
      // console.log(this.topshow);
    },
    getIndex() {
      if (this.$route.path != "/blog/index") {
        this.$router.push({
          name: "Index",
        });
      }
    },
    getlogin() {
      this.ToDialog = true;
    },
    // 登陆
    login() {
      request({
        url: "/login",
        method: "POST",
        data: { username: this.forms.username, password: this.forms.password },
      })
        .then((res) => {
          if (res.data.code == "200") {
            this.ToDialog = false;
            this.get_username = res.data.username;
            this.$store.commit("userlogin", this.get_username);
            // console.log(
            //   this.$store.state.user_username,
            //   this.$store.state.user_islogin
            // );
            this.text = res.data.msg;
            this.snackbar = true;
            this.usershow = false;
            this.forms = {
              username: "",
              password: "",
            };
          } else {
            this.snackbar = true;
            this.text = res.data.msg;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 注册
    register() {
      request({
        url: "/register",
        method: "POST",
        data: { username: this.forms.username, password: this.forms.password },
      })
        .then((res) => {
          this.ToDialog = true;
          if (res.data.code == "200") {
            this.text = "注册成功,请登录!";
            this.snackbar = true;
            this.forms = {
              username: "",
              password: "",
            };
          } else {
            this.snackbar = true;
            this.text = res.data.msg;
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
    // 下拉选项
    // 退出登陆
    get_logout() {
      this.$store.state.user_islogin = false;
      this.get_username = "";
      // this.$router.push({
      //   name: "BlogIndex",
      // });
    },
    imgLoad() {
      this.$nextTick(function () {
        // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
        this.imgHeight = (document.body.clientWidth * 1) / 4;
      });
    },
  },
  computed: {
    // 获取时间
    current: function () {
      var date = new Date();
      var current =
        date.getFullYear() +
        "年" +
        (date.getMonth() + 1) +
        "月" +
        date.getDate() +
        "日" +
        "---";
      return current;
    },
  },
};
// 站长统计
// document.write(
//   unescape(
//     "%3Cspan id='cnzz_stat_icon_1280025159'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1280025159%26online%3D2' type='text/javascript'%3E%3C/script%3E"
//   )
// );
</script>

<style lang="scss" scoped>
.top-enter-active {
  animation: aaa 2s;
} /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
.top-leave-active {
  animation: aaa 2s reverse;
}
.bottom-enter-active {
  animation: bbb 2s;
} /* 动画样式 animation 为名字(自己随便定义), 后面的enter-active 和 leave-active 分别代表进场和出场 Vue 会自动识别 */
.bottom-leave-active {
  animation: bbb 2s reverse;
}
@keyframes aaa {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  50% {
    opacity: 0.25;
    transform: translateX(25%);
  }

  75% {
    opacity: 0.75;
    transform: translateX(75%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes bbb {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.25;
    transform: translateX(-25%);
  }
  75% {
    opacity: 0.75;
    transform: translateX(-75%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
</style>